import React, { useEffect, useState } from "react";
import { activityCoundownNum } from "@/utils/dateUtil";

function Countdown(props) {
    const [timeoutStr, setTimeoutStr] = useState("0天0时0分0秒");
    const [countNum, setCountNum] = useState(props.count);

    useEffect(() => {
        if(countNum <= 0) {return;}
        const timer = setInterval(() => {
            setCountNum((countNum) => countNum - 1000);
            setTimeoutStr(activityCoundownNum(countNum));
            if (countNum <= 1000) {
                clearInterval(timer);
            }
        }, 1000);
        return () => {
            if (timer) {
                clearInterval(timer);
            }
        };
    }, [props.count, timeoutStr, countNum]);

    return (
        <div>
            <span>{timeoutStr}</span>
        </div>
    );
}

export default React.memo(Countdown);
